<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/home">数据统计</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="monthAdd">
      <div class="exam">
        <div style="margin-bottom: 5%">
          <span style="color: blue">考试统计</span>
        </div>
      </div>
      <div class="examimg">
        <img src="https://admin.youkaoshi.cn/components/com_exams/assets/img/statistic/exams.png" />
      </div>
      <div class="zongexam">
        <div class="number">
          <span>{{ ECount }}</span>
        </div>
        <span style="font-size: 15px; color: rgb(151, 154, 158)">总试卷数</span>
      </div>
      <div>
        <div class="bottomexamleft">
          <span> 已归档试卷数</span>
          <div class="numberbottom">0</div>
        </div>
        <div class="cutoffrule"></div>
        <div class="bottomexamright">
          <div>
            <span>总已考次数</span>
          </div>
          <div class="numberbottom">{{ KCount }}</div>
        </div>
      </div>
    </div>
    <div class="questions">
      <div class="question">
        <div style="margin-bottom: 5%">
          <span style="color: green">题库统计</span>
        </div>
      </div>
      <div class="questionimg">
        <img src="https://admin.youkaoshi.cn/components/com_exams/assets/img/statistic/questions.png" />
      </div>
      <div class="zongexam">
        <div class="questionnumber">
          <span>{{ BCount }}</span>
        </div>
        <span style="font-size: 15px; color: rgb(151, 154, 158)">当前总题库数</span>
      </div>
      <div>
        <div class="bottomexamleft">
          <span>题库使用率</span>
          <div class="questionnumberbottom">0%</div>
        </div>
        <div class="cutoffrule"></div>
        <div class="bottomexamright">
          <div>
            <span>总分类</span>
          </div>
          <div class="questionnumberbottom">2</div>
        </div>
      </div>
    </div>
    <div class="examinees">
      <div class="exam">
        <div style="margin-bottom: 5%">
          <span style="color: orange">考生统计</span>
        </div>
      </div>
      <div class="examineeimg">
        <img src="https://admin.youkaoshi.cn/components/com_exams/assets/img/statistic/students.png" />
      </div>
      <div class="zongexam">
        <div class="examineenumber">
          <span>{{ Pcount }}</span>
        </div>
        <span style="font-size: 15px; color: rgb(151, 154, 158)">考生总人数</span>
      </div>
      <div>
        <div class="bottomexamleft">
          <span>总分组</span>
          <div class="examineenumberbottom">0</div>
        </div>
        <div class="cutoffrule"></div>
        <div class="bottomexamright">
          <div>
            <span>已考人数</span>
          </div>
          <div class="examineenumberbottom">{{ Pcount }}</div>
        </div>
      </div>
    </div>
    <div class="breakthroughs">
      <div class="exam">
        <div style="margin-bottom: 5%">
          <span style="color: violet">闯关统计</span>
        </div>
      </div>
      <div class="breakthroughimg">
        <img src="https://admin.youkaoshi.cn/components/com_exams/assets/img/statistic/advances.png" />
      </div>
      <div class="zongexam">
        <div class="breakthroughnumber">
          <span>6</span>
        </div>
        <span style="font-size: 15px; color: rgb(151, 154, 158)">总闯关数</span>
      </div>
      <div>
        <div class="bottomexamleft">
          <span>总分类</span>
          <div class="breakthroughnumberbottom">1</div>
        </div>
        <div class="cutoffrule"></div>
        <div class="bottomexamright">
          <div>
            <span>已闯关次数</span>
          </div>
          <div class="breakthroughnumberbottom">0</div>
        </div>
      </div>
    </div>
    <!-- <div class="examed">
      <div style="padding: 10px">
        <strong>考试统计</strong>
      </div>
      <div style="float: right; font-size: 10px">
        注：根据考试所有排名展示前几名
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="Ename" label="考试名" width="180" />
        <el-table-column prop="ETestPaper" label="试卷名" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.ETestPaper }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="EisUse" label="部门名" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.Oname }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Eaveragescore" label="平均分" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.Eaveragescore }}%</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="EisUse" label="考试人数" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.EisUse }}人</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="EisUse" label="等分王">
          <template #default="scope">
            <el-tag>{{ scope.row.Name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-button type="primary" @click="statistics(scope)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div> -->
    <div class="crumbs">
      <div class="analyse"><strong>题库分析</strong></div>
      <div id="statistic"></div>
      <div id="statisticlv"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Statistics } from "@/utils/Exam/statistics/statistics";
import { UserProduct } from '@/api/Product/index';
import { Task } from "@/api/Product/exaam";
import router from "@/router";
import * as echarts from "echarts";

const _exam = new UserProduct();
const _task = new Task();

export default defineComponent({
  setup() {
    const data = reactive<Statistics>({
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      questions: 100,
      testpapers: 5,
      arranges: 10,
      ECount: 0,
      activeName: 1,
      Pcount: 0,
      KCount: 0,
      BCount: 0,
      cquestion: 0,
      equestion: 0,
      mquesiotn: 0,
    });
    onMounted(() => {
      methods.GetuserCount();
      methods.GetTaskPaper();
      methods.QuestionLv();
    });
    const methods = {
      GetuserCount() {
        _exam.GetUser({
          page: 1,
          limit: 999,
          key: "",
          isActive: 1,
          isBan: 1
        }).then((res) => {
          data.Pcount = res.data.total
        })
      },
      GetTaskPaper() {
        _task.TaskPaper({}).then((res: any) => {
          if (res.code === 0) {
            data.ECount = res.data.taskPaperCount;
            data.KCount = res.data.examCount;
            data.BCount = res.data.questionBank;
            data.cquestion = res.data.cquestion;
            data.equestion = res.data.equestion;
            data.mquesiotn = res.data.mquesiotn
            methods.stats();
          }
        });
      },
      QuestionLv() {
        _task.QuestionLv({}).then((res: any) => {
          if (res.code === 0) {
            var myChart = echarts.init(document.getElementById("statisticlv"));
            var options = {
              title: {
                text: "试题难度统计",
                left: "center",
              },
              tooltip: {
                trigger: "item",
              },
              legend: {
                orient: "vertical",
                right: "right"
              },
              series: [
                {
                  name: "Access From",
                  type: "pie",
                  radius: "50%",
                  data: [
                    { value: res.data.one, name: "一级" },
                    { value: res.data.two, name: "二级" },
                    { value: res.data.three, name: "三级" },
                    { value: res.data.four, name: "四级" },
                    { value: res.data.five, name: "五级" },
                    { value: res.data.sex, name: "六级" },
                    { value: res.data.senven, name: "七级" },
                    { value: res.data.eight, name: "八级" },
                    { value: res.data.nine, name: "九级" },
                    { value: res.data.ten, name: "十级" },
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            };
            myChart.setOption(options);

          }
        })
      },
      stats() {
        var myChart = echarts.init(document.getElementById("statistic"));
        var option = {
          title: {
            text: "试题类型统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            right: "right"
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: [
                { value: data.cquestion, name: "单选题" },
                { value: data.mquesiotn, name: "多选题" },
                { value: data.equestion, name: "问答题" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChart.setOption(option)
      },
      question() {
        data.dialogFormVisible = true;
      },
      statistics(val: any) {
        router.push("/statistics/detalistatistics/" + val.row.Ename);
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.monthAdd {
  display: inline-block;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  padding: 2%;
  margin: 2%;
  background-image: linear-gradient(315deg, #ffffff 0%, #eef3ff 100%);
  width: 20%;
}

.questions {
  display: inline-block;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  padding: 2%;
  margin: 2%;
  background-image: linear-gradient(315deg, #ffffff 0%, #ecfffd 100%);
  width: 20%;
}

.examinees {
  display: inline-block;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  padding: 2%;
  margin: 2%;
  background-image: linear-gradient(315deg, #ffffff 0%, #fff3e8 100%);
  width: 20%;
}

.breakthroughs {
  display: inline-block;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  padding: 2%;
  margin: 2%;
  background-image: linear-gradient(315deg, #ffffff 0%, #faf5ff 100%);
  width: 20%;
}

.examed {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.diaalog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.paging {
  margin: 20px;
}

.exam {
  border-bottom: 1px solid rgb(198, 211, 240);
  padding: 1%;
}

.question {
  border-bottom: 1px solid rgb(198, 240, 207);
  padding: 1%;
}

.examinee {
  border-bottom: 1px solid rgb(228, 240, 198);
  padding: 1%;
}

.breakthrough {
  border-bottom: 1px solid rgb(239, 198, 240);
  padding: 1%;
}

.examimg {
  background-color: #e1ebff;
  padding: 9%;
  width: 40%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  margin: 8%;
  display: inline-block;
}

.questionimg {
  background-color: #ddf7f3;
  padding: 9%;
  width: 40%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  margin: 8%;
  display: inline-block;
}

.examineeimg {
  background-color: #ffecd9;
  padding: 9%;
  width: 40%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  margin: 8%;
  display: inline-block;
}

.breakthroughimg {
  background-color: #f0e4ff;
  padding: 9%;
  width: 40%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  margin: 8%;
  display: inline-block;
}

.zongexam {
  width: 40%;

  display: inline-block;
}

.number {
  color: blue;
  font-weight: 700;
  font-size: 50px;
  border-bottom: 1px solid rgb(198, 211, 240);
}

.questionnumber {
  color: green;
  font-weight: 700;
  font-size: 50px;
  border-bottom: 1px solid rgb(199, 240, 198);
}

.examineenumber {
  color: orange;
  font-weight: 700;
  font-size: 50px;
  border-bottom: 1px solid rgb(236, 240, 198);
}

.breakthroughnumber {
  color: violet;
  font-weight: 700;
  font-size: 50px;
  border-bottom: 1px solid rgb(240, 198, 232);
}

.bottomexamleft {
  display: inline-block;
  text-align: center;
  width: 40%;
  color: rgb(151, 154, 158);
  font-size: 15px;
  margin-right: 5%;
}

.bottomexamright {
  display: inline-block;
  text-align: center;
  width: 40%;
  color: rgb(151, 154, 158);
  font-size: 15px;
  margin-left: 5%;
}

.cutoffrule {
  display: inline-block;
  border: 1px solid rgb(198, 211, 240);
  margin: 10px;
  height: 40px;
}

.numberbottom {
  color: blue;
  font-weight: 500;
  font-size: 30px;
  margin-top: 10px;
}

.questionnumberbottom {
  color: green;
  font-weight: 500;
  font-size: 30px;
  margin-top: 10px;
}

.examineenumberbottom {
  color: orange;
  font-weight: 500;
  font-size: 30px;
  margin-top: 10px;
}

.breakthroughnumberbottom {
  color: violet;
  font-weight: 500;
  font-size: 30px;
  margin-top: 10px;
}

.analyse {
  font-size: 25px;
  margin: 1%;
  border-bottom: 1px solid gray;
}

#statistic {
  display: inline-block;
  width: 50%;
  height: 500px;
}

#statisticlv {
  display: inline-block;
  width: 50%;
  height: 500px;
}
</style>
